/* 护眼主题 */
.theme-sepia {
  /* 背景色系 */
  --vp-c-bg: #f7f3e9;
  --vp-c-bg-soft: #f0ebe1;
  --vp-c-bg-mute: #e8e2d9;
  --vp-c-bg-alt: #f0ebe1;
  
  /* 文本色系 */
  --vp-c-text-1: #5c4b37;
  --vp-c-text-2: #6b5a45;
  --vp-c-text-3: #8a7965;
  --vp-c-text-4: #a89783;
  
  /* 边框色系 */
  --vp-c-border: #d4c4b0;
  --vp-c-divider: #d4c4b0;
  --vp-c-gutter: #e8e2d9;
  
  /* 品牌色系 */
  --vp-c-brand: #8b7355;
  --vp-c-brand-light: #a09075;
  --vp-c-brand-lighter: #b4a595;
  --vp-c-brand-dark: #6b5a45;
  --vp-c-brand-darker: #4d4032;
  --vp-c-brand-dimm: rgba(139, 115, 85, 0.1);
  
  /* 链接色系 */
  --vp-c-link: #8b7355;
  --vp-c-link-hover: #6b5a45;
  --vp-c-link-active: #4d4032;
  
  /* 代码色系 */
  --vp-c-code: #c19a6b;
  --vp-c-code-bg: #e8e2d9;
  --vp-c-code-block-bg: #f0ebe1;
  
  /* 提示色系 */
  --vp-c-tip: #8b7355;
  --vp-c-tip-bg: #f0ebe1;
  --vp-c-warning: #d4a574;
  --vp-c-warning-bg: #f7f3e9;
  --vp-c-danger: #c19a6b;
  --vp-c-danger-bg: #f7f3e9;
  
  /* 阴影色系 */
  --vp-c-shadow: rgba(139, 115, 85, 0.1);
  --vp-c-shadow-light: rgba(139, 115, 85, 0.05);
  
  /* 特殊元素 */
  --vp-c-bg-soft-up: #f7f3e9;
  --vp-c-bg-soft-down: #f0ebe1;
  --vp-c-bg-soft-mute: #e8e2d9;
  
  /* 按钮色系 */
  --vp-button-brand-bg: #8b7355;
  --vp-button-brand-hover-bg: #6b5a45;
  --vp-button-brand-active-bg: #4d4032;
  --vp-button-brand-text: #f7f3e9;
  
  --vp-button-alt-bg: #e8e2d9;
  --vp-button-alt-hover-bg: #d4c4b0;
  --vp-button-alt-active-bg: #c0b0a0;
  --vp-button-alt-text: #5c4b37;
  
  --vp-button-sponsor-bg: #d4a574;
  --vp-button-sponsor-hover-bg: #c19a6b;
  --vp-button-sponsor-active-bg: #a09075;
  --vp-button-sponsor-text: #f7f3e9;
  
  /* 自定义主题变量 */
  --theme-primary: #8b7355;
  --theme-secondary: #a89783;
  --theme-accent: #a09075;
  --theme-success: #8b7355;
  --theme-warning: #d4a574;
  --theme-error: #c19a6b;
  --theme-info: #8b7355;
  
  /* 代码块主题 */
  --code-bg: #f0ebe1;
  --code-border: #d4c4b0;
  --code-text: #5c4b37;
  --code-keyword: #c19a6b;
  --code-string: #8b7355;
  --code-comment: #a89783;
  --code-function: #8b7355;
  --code-variable: #a09075;
  
  /* 表格主题 */
  --table-header-bg: #f0ebe1;
  --table-border: #d4c4b0;
  --table-hover-bg: #e8e2d9;
  
  /* 卡片主题 */
  --card-bg: #f7f3e9;
  --card-border: #d4c4b0;
  --card-shadow: rgba(139, 115, 85, 0.1);
  
  /* 输入框主题 */
  --input-bg: #f7f3e9;
  --input-border: #d4c4b0;
  --input-focus-border: #8b7355;
  --input-text: #5c4b37;
  --input-placeholder: #a89783;
  
  /* 滚动条主题 */
  --scrollbar-bg: #e8e2d9;
  --scrollbar-thumb: #c0b0a0;
  --scrollbar-thumb-hover: #a89783;
  
  /* 动画时间 */
  --theme-transition-duration: 0.3s;
}

/* 护眼主题特定样式 */
.theme-sepia .vp-feature {
  background: linear-gradient(135deg, #f7f3e9 0%, #f0ebe1 100%);
  border-color: var(--vp-c-border);
}

.theme-sepia .vp-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(139, 115, 85, 0.15);
}

.theme-sepia .vp-doc .vp-hero {
  background: linear-gradient(135deg, #f7f3e9 0%, #f0ebe1 100%);
}

.theme-sepia .vp-button {
  box-shadow: 0 2px 8px rgba(139, 115, 85, 0.1);
}

.theme-sepia .vp-button:hover {
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.15);
}

/* 护眼主题特殊效果 - 减少蓝色光 */
.theme-sepia .vp-doc a {
  color: var(--theme-primary);
  text-decoration: none;
}

.theme-sepia .vp-doc a:hover {
  color: var(--theme-secondary);
  text-decoration: underline;
}

.theme-sepia .vp-doc img {
  filter: sepia(0.1) brightness(1.05) contrast(0.95);
}

.theme-sepia .vp-doc .vp-code {
  background: var(--code-bg);
  border-color: var(--code-border);
  color: var(--code-text);
}

.theme-sepia .vp-doc .vp-code-group {
  border-color: var(--code-border);
}

.theme-sepia .vp-doc .vp-code-group .tabs {
  background: var(--code-bg);
  border-color: var(--code-border);
}

.theme-sepia .vp-doc .vp-code-group .tab {
  color: var(--code-text);
}

.theme-sepia .vp-doc .vp-code-group .tab.active {
  color: var(--theme-primary);
  background: var(--code-bg);
}

/* 护眼主题 - 柔和的色彩 */
.theme-sepia .vp-doc .custom-block {
  border-left: 4px solid var(--theme-primary);
  background: var(--vp-c-bg-soft);
}

.theme-sepia .vp-doc .custom-block.warning {
  border-left-color: var(--theme-warning);
  background: rgba(212, 165, 116, 0.1);
}

.theme-sepia .vp-doc .custom-block.danger {
  border-left-color: var(--theme-error);
  background: rgba(193, 154, 107, 0.1);
}

.theme-sepia .vp-doc .custom-block.tip {
  border-left-color: var(--theme-success);
  background: rgba(139, 115, 85, 0.1);
}